<m-card [hideHead]="true">
    <div class="head">
        <div class="g-card-title">软件使用率</div>
        <div>
            <button class="btn btn-sm btn-secondary" (click)="zone ? dialog.open(softwareSelect) : zoneSelect.open()">
        自定义统计
      </button>
        </div>
    </div>
    <div>
        <m-echarts></m-echarts>
    </div>
</m-card>

<m-zone-select-input #zoneSelect [selection]="zoneSelection" ngModel (ngModelChange)="zoneChange()" hidden>
</m-zone-select-input>

<ng-template #softwareSelect>
    <div class="modal-header">
        <h3>选择软件</h3>
    </div>
    <div class="modal-body">
        <m-api-data-table [dataSource]="softDataSource" [selection]="softSelection" [defaultOption]="{ ids: zoneIDs }">
            <ng-container mDataTableColumn header="ID">
                <ng-template let-id="id">
                    <td>{{ id }}</td>
                </ng-template>
            </ng-container>
            <ng-container mDataTableColumn header="软件别名">
                <ng-template let-name="name">
                    <td>{{ name }}</td>
                </ng-template>
            </ng-container>
            <ng-container mDataTableColumn header="备注">
                <ng-template let-remark="remark">
                    <td>{{ remark }}</td>
                </ng-template>
            </ng-container>
            <ng-container mDataTableColumn header="源内版本">
                <ng-template let-version="version">
                    <td>{{ version }}</td>
                </ng-template>
            </ng-container>
        </m-api-data-table>
    </div>
    <div class="modal-footer">
        <button class="btn btn-secondary" (click)="dialog.closeAll()">取消</button>
        <button class="btn btn-primary" (click)="confirm()">确定</button>
    </div>
</ng-template>